.body {
    .share {
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 9999;
        top: 0;
        left: 0;
        background: url('@/assets/icon/wawa.png') no-repeat ;
        background-size: cover;
        background-position: center;
        padding-top: 300px;
        box-sizing: border-box;
        p {
            font-size: 16px;
            color: #fff;
            margin-top: 10px;
            margin-left: 20px;
        }
    }
}
.wrapper,
.home {
    height: 100%;
    width: 100%;
    font-size: 14px;
    font-family: v-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    >.box {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        header {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            width: 100%;
            // height: 42px;
            // height: 1px;
            text-align: center;
            font-size: 12px;
            // border-bottom: 1px solid #ccc;
            height: 0;
            /* 设置高度为0，只显示顶部边框 */
            border-top: 2px solid #eee;
            /* 灰色顶部边框 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
            /* 阴影效果 */
            // .van-nav-bar {
            //     // background: linear-gradient(180deg, #363636 100%, #E4C493 100%);
            //     // background: rgba($color: #000, $alpha: 0);
            //     background: #eee;
            //     // p{
            //     //     color: #fff;
            //     // }
            // }
            // img {
            //     height: 25px;
            // }
        }

        main {
            flex: 1;
            width: 100%;
            overflow: hidden;
            overflow-y: auto;
            background: #f6f6f6;

            ul {
                height: auto;
                width: 100%;
                padding: 0px 15px;
                box-sizing: border-box;

                li {
                    width: 100%;
                    font-size: 14px;
                    margin-top: 20px;
                    display: flex;
                    justify-content: flex-start;

                    .wrap {
                        max-width: 90%;
                        display: flex;
                        flex-direction: column;

                        .mark {
                            background: #fff;
                            padding: 10px;
                            border-radius: 6px;

                            .van-divider {
                                margin: 3px;
                            }

                            >img {
                                height: 20px;
                                float: right;
                                margin-top: 0px;
                            }

                            .think {
                                img {
                                    width: 15px;
                                    margin-top: -2px;
                                    margin-left: 10px;
                                    animation: rotate .5s linear infinite;
                                }
                            }

                            * {
                                line-height: 20px;
                            }

                            pre {
                                margin: 10px 0;
                                padding: 10px;
                            }
                        }

                        @keyframes rotate {
                            from {
                                transform: rotate(0deg);
                            }

                            to {
                                transform: rotate(360deg);
                            }
                        }

                        .info {
                            display: flex;

                            span {
                                font-size: 12px;
                                margin-top: 2px;
                            }

                            .pix {
                                width: 30px;
                                height: 30px;
                                // border: 1px solid #ccc;
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                img {
                                    height: 100%;
                                    width: 100%;
                                }

                                i {
                                    font-size: 18px;
                                    color: #fff;
                                }
                            }
                        }
                    }
                }

                li.assistant {
                    .mark {
                        margin-left: 38px;
                        margin-top: -12px;
                    }

                    .info {
                        span {
                            margin-left: 8px;
                        }
                    }
                }

                li.user {
                    justify-content: flex-end;

                    .info {
                        justify-content: flex-end;

                        span {
                            margin-right: 8px;
                        }
                    }

                    .mark {
                        // justify-content: flex-end !important;
                        margin-right: 38px;
                        margin-top: -12px;
                    }
                }

                li:last-child {
                    padding-bottom: 50px;
                }
            }
        }

        footer {
            height: 60px;
            background: #f6f6f6;
            // border-top: 1px solid #f3f3f3;
            // border-top: 2px solid #eee; /* 灰色顶部边框 */
            // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* 阴影效果 */
            // .van-search {
            //     .van-search__action {
            //         width: 60px;
            //         i {
            //             font-size: 25px;
            //             margin-top: 10px;
            //         }
            //         >div {
            //             display: flex;
            //             align-items: center;
            //             button {
            //                 width: 100%;
            //             }
            //         }
            //     }
            // }

            .send {
                width: 100%;
                height: 60px;
                padding: 0 15px;
                position: absolute;
                bottom: 0;
                left: 0;
                box-sizing: border-box;
                padding-bottom: 20px;

                .send-msg {
                    height: 100%;
                    width: 100%;
                    border-bottom: 3px solid #000;
                    display: flex;

                    input {
                        border: none;
                        outline: none;
                        font-weight: 400;
                        font-size: 16px;
                        // color: #00d715;
                        background: #f6f6f6;
                        margin-top: 10px;
                        flex: 1;
                    }
                }
            }
        }
    }
}

.home {
    >.wrap {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        background: #f6f6f6;

        header {
            height: 30px;
            display: flex;
            justify-content: space-between;

            >span {
                margin: 10px;
                font-size: 12px;

                span {
                    color: red;
                }
            }

            img {
                height: 30px;
                margin: 10px;
            }
        }

        main {
            flex: 1;
            .one {
                height: 100%;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 0 15px;
                position: relative;
                box-sizing: border-box;    
                .send {
                    width: 100%;
                    height: 60px;
                    padding: 0 15px;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    box-sizing: border-box;
                    padding-bottom: 20px;

                    .send-msg {
                        height: 100%;
                        width: 100%;
                        border-bottom: 3px solid #000;
                        display: flex;

                        input {
                            border: none;
                            outline: none;
                            font-weight: 400;
                            font-size: 16px;
                            // color: #00d715;
                            background: #f6f6f6;
                            margin-top: 10px;
                            flex: 1;
                        }
                    }
                }

                >img {
                    width: 50px;
                }

                h4 {
                    font-size: 26px;
                    margin-top: 25px;
                }

                .van-collapse {
                    width: 100%;
                    margin-top: 45px;

                    .van-collapse-item__content {
                        padding-top: 0;

                        p {
                            font-size: 12px;
                            // margin-top: 5px;
                            line-height: 200%;
                            padding: 0 0 0 5px;

                            &:before {
                                content: "·";
                                font-size: 30px;
                                margin-right: 5px;
                                position: relative;
                                top: 4px;
                                display: inline-block;
                                font-weight: 700;
                            }
                        }
                    }
                }
            }
            .two{
                padding: 0 15px;
                height: 100%;
                width: 100%;
                box-sizing: border-box;
                background: #fff;
                ul {
                    display: flex;
                    flex-direction: column;
                   
                    li {
                        height: 122px;
                        padding: 37px 25px 30px;
                        box-sizing: border-box;
                        border-radius: 16px;
                        &:nth-child(1) {
                            background: rgba(0,0,0,.05);
                            margin-top: 40px;
                            display: flex;
                            img {
                                height: 55px;
                                border-radius: 1rem;
                            }
                            p {
                                margin-left: 20px;
                                font-size: 20px;
                                font-weight: 800;
                                display: flex;
                                flex-direction: column;
                                span:nth-child(1) {
                                    margin-top: 8px;
                                }
                                span:nth-child(2) {
                                    margin-top: 10px;
                                    font-size: 13px;
                                    span {
                                        color: red;
                                    }
                                }
                            }
                        }
                        &:nth-child(2) {
                            background: #000;
                            // background: url('@/assets/icon/bg.gif') no-repeat #000; 
                            background-position: 10px -190px;
                            color: #fff;
                            margin-top: 20px;
                            position: relative;
                            p {
                                font-size: 20px;
                            }
                            span {
                                display: block;
                                margin-top: 15px;
                            }
                            img {
                                position: absolute;
                                top: 30px;
                                height: 30px;
                                left: 240px;
                            }
                        }
                        &:nth-child(3) {
                            // padding: 0;
                            height: 144px;
                            padding-top: 10px;
                            padding-bottom: 10px;
                            background: rgba(0,0,0,.05);
                            display: flex;
                            flex-direction: column;
                            margin-top: 20px;
                            .but {
                                width: 100%;
                                display: flex;
                                justify-content: flex-end;
                            }
                            button {
                                margin-top: 5px;
                                // background: #000;
                                width: 60px;
                                float: right;
                                height: 20px;
                                span {
                                    margin-top: 10px;
                                    font-size: 12px;
                                }
                            }
                            span {
                                margin-bottom: 10px;
                                font-size: 16px;
                                font-weight: 500;
                            }
                            textarea {
                                width: 100%;
                                border: none;
                                border-radius: 10px;
                                padding: 10px;
                                box-sizing: border-box;
                            }
                        }
                    }
                }
            }

        }

        footer {
            height: 50px;
            background-color: #000;

            .van-tabs {
                .van-tabs__nav {
                    background: #000;

                    span {
                        color: #FFF;
                    }

                    .van-tabs__line {
                        background: linear-gradient(180deg, #00d715, #30f3ff 55.21%, #575eff);
                        height: 5px;
                        width: 5px;
                        padding: 0;
                    }

                }

                .van-tabs__nav--line {
                    padding-bottom: 10px;
                }
            }
        }
    }
}